<template>
  <div class="zero-drift tapStyle secondary-page-mode">
    <div class="secondary-toolbar">
      <span>时间选择 : </span>
      <div class="layoutBox" style="width:242px">
        <el-date-picker v-model="dateRange" type="daterange" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
      </div>&emsp;&emsp;
      <span>类型 : </span>
      <div class="layoutBox" style="width:120px">
        <el-select v-model="typeSelect"  collapse-tags placeholder="请选择">
          <el-option
            v-for="item in optionData"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </div>&emsp;&emsp;
      <span>参数 : </span>
      <div class="layoutBox" style="width:120px">
        <el-select v-model="parameter"  collapse-tags placeholder="请选择">
          <el-option
            v-for="item in optionData"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </div>&emsp;&emsp;
      <el-button><i class="iconfont icon-sousuo"></i>查询</el-button>
    </div>
    <div class="currency-mode-wrap">
      <div class="tablebox" style="height: calc(100% - 34px)">
        <el-table
          :data="tableData"
          border
          height="100%"
          style="width: 100%">
          <el-table-column
            type="index"
            label="序号"
            width="50">
          </el-table-column>
          <el-table-column
            prop="type"
            label="类型">
          </el-table-column>
          <el-table-column
            prop="project"
            label="项目">
          </el-table-column>
          <el-table-column
            prop="modify"
            label="修改时间">
          </el-table-column>
          <el-table-column
            prop="record"
            label="修改记录">
          </el-table-column>
          <el-table-column
            prop="warehousing"
            label="入库时间">
          </el-table-column>
        </el-table>
      </div>
      <div class="paginationBox">
        <el-pagination
          @size-change="paginationSizeChange"
          @current-change="paginationChange"
          :current-page.sync="currentPage"
          :page-size="pageSize"
          background
          :small = "true"
          popper-class = "select-common-option"
          :page-sizes = "pageList"
          layout="total,sizes,slot,->,prev, pager, next, jumper"
          :total="totalRecords">
          <span class="el-pagination__current">当前第{{currentPage}}/{{totalPage}}页</span>
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "",
    data() {
      return {
        dateRange: "",
        typeSelect:'',
        parameter:'',
        optionData:[],
        tableData:[{
          type:'设备参数',
          project:'消解温度',
          modify:'2019-02-06 15:55:22',
          record:'40-50',
          warehousing:'2019-02-20 15:55:22',
        }],
        currentPage: 1, //分页组件当前页
        pageSize: 10, //分页每页多少条数据
        totalRecords: 1000, //总条数
        pageList: [10, 15, 20] //设置每页多少条
      };
    },
    computed: {
      totalPage() {
        let number = 0;
        number = Math.ceil(this.totalRecords / this.pageSize);
        return number;
      }
    },
    methods:{
      paginationChange(val) {
        //分页页码改变时执行
        this.currentPage = val;
        console.log(this.currentPage);
      },
      paginationSizeChange(val) {
        //分页pageSize改变时执行
        this.pageSize = val;
      },
    },
    mounted(){
      // this.createdChart();
    },
    created() {
      this.$store.commit("setShowlefttree", true);
    }
  };
</script>

<style scoped lang="less">
  .zero-drift .currency-mode-wrap{
    padding: 0;
    border: none;
  }
  .timing-text{
    font-size: 16px;
    b{
      display: inline-block;
      width: 24px;
    }
  }
  .fault,.abnormal,.normal{
    i{
      display: inline-block;
      vertical-align: middle;
      margin-bottom: 2px;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #c64522;
      margin-right: 3px;
    }
  }
  .abnormal i{
    background: #c64522;
  }
  .normal i{
    background: #67c622;
  }
  .fault i{
    background: #dfae1c;
  }
</style>

